<!doctype html>

<!--

    Welcome to the light side of the source, young padawan.

    One step closer to learn something interesting you are...

                               ____                  
                            _.' :  `._               
                        .-.'`.  ;   .'`.-.           
               __      / : ___\ ;  /___ ; \      __  
             ,'_ ""=-.:__;".-.";: :".-.":__;.-="" _`,
             :' `.t""=-.. '<@.`;_  ',@:` ..-=""j.' `;
                  `:-.._J '-.-'L__ `-.-' L_..-;'     
                    "-.__ ;  .-"  "-.  : __.-"       
                        L ' /.======.\ ' J           
                         "-.   "__"   .-"            
                        __.l"-:_JL_;-";.__           
                     .-j/'.;  ;""""  / .'\"-.        
                   .' /:`. "-.:     .-" .';  `.      
                .-"  / ;  "-. "-..-" .-"  :    "-.   
             .+"-.  : :      "-.__.-"      ;-._   \  
             ; \  `.; ;                    : : "+. ; 
             :  ;   ; ;                    : ;  : \: 
             ;  :   ; :                    ;:   ;  : 
            : \  ;  :  ;                  : ;  /  :: 
            ;  ; :   ; :                  ;   :   ;: 
            :  :  ;  :  ;                : :  ;  : ; 
            ;\    :   ; :                ; ;     ; ; 
            : `."-;   :  ;              :  ;    /  ; 
             ;    -:   ; :              ;  : .-"   : 
             :\     \  :  ;            : \.-"      : 
              ;`.    \  ; :            ;.'_..-=  / ; 
              :  "-.  "-:  ;          :/."      .'  :
               \         \ :          ;/  __        :
                \       .-`.\        /t-""  ":-+.   :
                 `.  .-"    `l    __/ /`. :  ; ; \  ;
                   \   .-" .-"-.-"  .' .'j \  /   ;/ 
                    \ / .-"   /.     .'.' ;_:'    ;  
                     :-""-.`./-.'     /    `.___.'   
                           \ `t  ._  /               
                            "-.t-._:'                

-->

<!--
    
    So you'd like to know how to use impress.js?
    
    You've made the first, very important step - you're reading the source code.
    And that's how impress.js presentations are built - with HTML and CSS code.
    
    Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively.
    More importantly, you need to be a designer. There are no default styles or layouts for impress.js presentations.
    
    You need to design and build it by hand.
    
    So...
    
    Would you still like to know how to use impress.js?
    
-->

<html lang="zh">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capablele-mobile-web-app-capable" content="yes" />
    <title>浅谈Vuex</title>

    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <!--
        
        Impress.js doesn't depend on any external stylesheets. It adds all of the styles it needs for the
        presentation to work.
        
        This style below contains styles only for demo presentation. Browse it to see how impress.js
        classes are used to style presentation steps, or how to apply fallback styles, but I don't want
        you to use them directly in your presentation.
        
        Be creative, build your own. We don't really want all impress.js presentations to look the same,
        do we?
        
        When creating your own presentation get rid of this file. Start from scratch, it's fun!
        
    -->
    <link href="css/impress-demo.css" rel="stylesheet" />

    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>


<body class="impress-not-supported">

    <!--
    For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    </div>


    <div id="impress">
        <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
            <!--<q><img src="images/ts.jpg"/><q>-->
            <span class="try">读书笔记</span>
            <h1>Vuex 的 Q & A</h1>
            <span class="footnote">赵 健</span>
        </div>

        <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">

            <p>Vuex 是什么？</p>
            <p class="tit_z3">什么是“状态管理模式”？</p>
            <img src="images/11.png" />

        </div>

        <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
            <div class="tit_z3">
                <span class="have"><sup>·</sup> state，驱动应用的数据源；</span> <span class="you"><sup>·</sup> view，以声明方式将state映射到视图；</span>

                <span class="noticed"><sup>·</sup> actions，响应在view上的用户输入导致的状态变化。 </span>
                <q><img src="images/vuex1.png"/><q>
            </div>

        </div>

 <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p><p class="tit_z2"><sup>·</sup> 多个视图依赖于同一状态。</p>
        <p class="tit_z2"><sup>·</sup> 来自不同视图的行为需要变更同一状态。</p>
        <q><img src="images/vuex.png"/><q>
        </p>
    </div>


<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
            <p><strong><sup>·</sup> State</strong> <br/> </p>
            <p class="tit_z2">State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入store对象，后期就可以使用this.$store.state直接获取状态</p>
            <p><img src="images/12.png"/></p>
        </div>

 <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
            <div class="tit_z3">
                <span class="have"><strong><sup>·</sup> Mutations</strong></span> 
                <p class="tit_z2"><span class="you">Mutations</span>的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值state。</p>
                <p><img src="images/17.png"/></p>
            </div>
        </div>


    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p><strong><sup>·</sup> Actions</strong></p>
        <p class="tit_z3">Actions也可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作,使用this.$store.dispatch(actionName)方法可直接触发</p>
        <p><img src="images/19.png"/></p>
        </div>

<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
            <div class="tit_z3">
                <span class="have"><strong><sup>·</sup> Getters</strong></span> 
                <p class="tit_z2">有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。</p>
                <p><img src="images/20.png"/></p>
            </div>
        </div>

<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p><p class="tit_z2"><sup>·</sup> Plugins</p>
        <p class="tit_z2">插件就是一个钩子函数，在初始化store的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。</p>
        <q><img src="images/21.png"/><q>
        </p>
    </div>

        <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
            <p>
                <p class="tit_z2"><sup>·</sup> 状态数据存储在哪里？</p>
                <q><img src="images/0.jpg"/><q>
        </p>
    </div>

    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <b><p class="tit_z2"><sup>·</sup> 组件怎么获取状态？</p></b>
        <p  class="tit_z2">组件要使用状态（getter of state）则在组件引入 vuex 配置，为每个coputed 变量指定一个 getter 方法，方法的第一个参数总是 state，然后返回你要的</p>
    </div>

 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
            <p><strong><sup>·</sup> 怎么修改状态？</strong> <br/> </p>
             <p  class="tit_z2">组件的状态 getter 不要做任何直接修改状态的事情，或者是触发其他有副作用的事件等。想管理状态则触发 mutation，真正给 state 动刀的是在 vuex。
每当你需要管理状态时，每个改变都可以定义成一个『命令』，叫 Mutation，通过在 store 中定义『命令』和执行器，要改变状态就通过 sotre 发出这个命令。
Mutation 强调同步操作，至于你要对管理状态作出异步的操作就得看看 Action</p>
        </div>

  <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
            <p><sup>·</sup> 如何异步修改状态?</p>
           <p  class="tit_z2">在组件中 vex 配置相关 action，然后该方法就直接在 vm 下可以访问，方法的实现通常是在异步操作中组合一些 mutation，当然，如果 Action 用在同步场景，你可以把 Actions 理解成用于组合 Mutation 的大 Mutation，另外，action 方法的第一个参数总是 store</p>
        </div>

  <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
            <p><strong>我想要一些回调的钩子啥的，拦截一些state的处理作分析</strong> <br/> </p>
             <p  class="tit_z2">store 有 middlewares 配置，让你可以拦截所有 mutation，在开发环境可以使用内置的 logger 中间件，打印 mutation ，而且能获得前后的 state 快照。</p>
        </div>

  <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
            <p>如果我不遵循潜规则，在vuex 以外修改状态!</p>
            <img src="images/1.jpg"/>
        </div>

 <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
            <div class="tit_z3">
                <span class="have">遵循潜规则，但是在表单 input 中用 v-model，双向绑定， </span> <span class="you">会在 mutation 以外修改 state</span>
            </div>

        </div>

        <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">

            <b class="scaling"><sup>·</sup>  什么情况下我应该使用 Vuex？引入状态管理的意义</b>

        </div>

        <div id="tiny1" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="6">
            <p>
                <p>谢谢！</p>

        </div>

        <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
            <p>前端是需要交流，需要活力，需要跟随社区脚步的，因为发展很快</p>
        </div>
        <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
            <p>下期分享主题</p>
            <p class="tit_z3">利用Docker安装构建Sentry--错误日志收集框架</p>
        </div>

        <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
        </div>

    </div>


    <!--<div class="hint">
        <p>Use a spacebar or arrow keys to navigate</p>
    </div>-->
    <script>
        if ("ontouchstart" in document.documentElement) {
            document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
        }
    </script>


    <script src="js/impress.js"></script>
    <script>
        impress().init();
        // $(document).click(function(){


        //             impress().next();
        //         })
        //  document.onkeydown=function(event){
        //      var e = event || window.event || arguments.callee.caller.arguments[0];
        //     if(e && e.keyCode==39){ // 按 Esc 
        //          //要做的事情

        //         }
        //     //   if(e && e.keyCode==113){ // 按 F2 
        //     //        //要做的事情
        //     //      }            
        //     //   if(e && e.keyCode==13){ // enter 键
        //     //       //要做的事情
        //     //  }
        //  };
    </script>

    <!--
    
    The `impress()` function also gives you access to the API that controls the presentation.
    
    Just store the result of the call:
    
        var api = impress();
    
    and you will get three functions you can call:
    
        `api.init()` - initializes the presentation,
        `api.next()` - moves to next step of the presentation,
        `api.prev()` - moves to previous step of the presentation,
        `api.goto( stepIndex | stepElementId | stepElement, [duration] )` - moves the presentation to the step given by its index number
                id or the DOM element; second parameter can be used to define duration of the transition in ms,
                but it's optional - if not provided default transition duration for the presentation will be used.
    
    You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed.
    Don't worry, it wont initialize the presentation again.
    
    For some example uses of this API check the last part of the source of impress.js where the API
    is used in event handlers.
    
-->

</body>

</html>

<!--
    
    Now you know more or less everything you need to build your first impress.js presentation, but before
    you start...
    
    Oh, you've already cloned the code from GitHub?
    
    You have it open in text editor?
    
    Stop right there!
    
    That's not how you create awesome presentations. This is only a code. Implementation of the idea that
    first needs to grow in your mind.
    
    So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.
    
    Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like
    to present. It will get you closer and closer to the layout you'll build later with impress.js.
    
    Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do
    it earlier, because you'll only waste your time fighting with positioning of useless points.
    
    If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about 
    creating awesome and engaging presentations.
    
    Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
    
-->

<!--
    
    Are you still reading this?
    
    For real?
    
    I'm impressed! Feel free to let me know that you got that far (I'm @bartaz on Twitter), 'cause I'd like
    to congratulate you personally :)
    
    But you don't have to do it now. Take my advice and take some time off. Make yourself a cup of coffee, tea,
    or anything you like to drink. And raise a glass for me ;)
    
    Cheers!
    
-->